<template>
    <div class="second_level_page sale_statistics_page">
        <section class="tab_section">
            <div @click="sort1" :class="this.flag===1? 'tab active':'tab'">销量</div>
            <div @click="sort2" :class="this.flag===2? 'tab active':'tab'">销售额</div>
            <div @click="sort3" :class="this.flag===3? 'tab active':'tab'">退货</div>
        </section>
        <section class="statistics_main">
            <ul class="choose_time">
                <li  :class="this.checkedTime===1? 'active':''" >
                    <div @click="thisDay">今天</div>
                </li>
                <li :class="this.checkedTime===2? 'active':''">
                    <div  @click="thisMouth">本月</div>
                </li>
                <li  :class="this.checkedTime===3? 'active':''">
                    <div @click="lastMouth">上月</div>
                </li >
                <li :class="this.checkedTime===4? 'active':''">
                   <div  @click="toChoseTime()">自定义时间段</div>
                </li>
            </ul>
            <div class="text">
                <div class="left" style="color:#333333;font-size:.3rem">时间段:&nbsp;{{startAndEnd(this.startTime,this.endTime)}}</div>
                <div class="clear" style="color:333333;font-size:.3rem"></div>
            </div>
            <div  class="table" >
                <div class="row head_row ">
                    <div class="cell">商品名</div>
                    <div class="cell">&emsp;{{choseHead1()}}</div>
                    <div class="cell">&emsp;{{choseHead2()}}</div>
                    <div class="cell">&emsp;操作</div>
                </div>
                 <v-scroll class="receive_voucher_scroll" :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" style="margin-top:1.3rem;">
                    <div class="row head_row flex"  v-for="todo in this.goods">
                        <div class="cell" id="changeBig" @touchstart="changeBig({todo,$event})" @touchend="changeSmall({todo,$event})" >{{cateName(todo)}}</div>
                        <div class="cell">{{totalNum(todo)}}</div>
                        <div v-if="" class="cell">{{totalMoney(todo)}}</div>
                        <div class="cell" @click="toDetails(todo.CateID)">详情</div>
                    </div>  
                </v-scroll>
            </div>
        </section>

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div> 
</template>

<script>           
    /*import 'src/plugins/lCalendar.js'
    import 'src/style/lCalendar.css'*/
    import {mapState} from 'vuex'
    import {StatisticalOfCate} from 'src/service/getData'
    import Scroll from 'src/components/common/pulldown'
    import {fmoney} from 'src/config/mUtils'

    export default {
        data(){
            return{
                token:'',
                employeeId: {},
                flagTime:1,
                startTime : '',
                endTime : '',
                flag:1,//排序
                goods :[],
                checkedTime:1,
                startRow:1, //开始页数
                endRow:20, //结束页数
                loadingText:'加载中...',
                base : 20, //基数
               
            }
        },
        mounted(){

            if(this.$route.query.token)
                this.token = this.$route.query.token;
            else
                this.token=this.userInfo.token;
            this.initData();
            
        },
        components: {
            'v-scroll':Scroll
        }, 
        computed:{
        ...mapState([
            'userInfo',
            ])
        },        
        methods:{
        /*...mapMutations([
           'SAVE_AVANDER'
        ]),*/
        fmoney(s, n){
            return fmoney(s, n)
        },
        //详情页
        toDetails(cateId){
            this.$router.push({path:'/profile/statistics/goodsStatistics/cateDetails',query:{flagTime:this.flagTime,cateId:cateId,startTime:this.startTime,endTime:this.endTime,index:2,token:this.token}})
        },
        choseHead1(){
            if(this.flag==1)
                return "交易量(件)";
            else if(this.flag==2)
                return "交易额(元)";
            else
                return "退货量(件)";
        },
        choseHead2(){
            if(this.flag==1)
                return "退货量(件)";
            else if(this.flag==2)
                return "退款额(元)"
            else
                return "退货额(元)";
        },
        toChoseTime(){
            this.checkedTime=4;
            this.flagTime=4;
            this.$router.replace({path:'/profile/statistics/goodsStatistics/choseTime',query:{ toIndex:3,index:1}});
        },
        startAndEnd(startTime,endTime){
            if(startTime!=''&&endTime=='')
                return startTime;
            if(startTime==''&&endTime=='')
                return '';
            else
                return "    "+startTime+"——"+endTime;
        },
        cateName(todo){

            if(todo.cateName.length>=5)
            {
                return todo.cateName.substring(0,5)+"...";
            }
            else
            {
                return todo.cateName
            }    
        },

        totalNum(todo){
            if(this.flag==1)
            {
                if(!todo.buyNum)
                {
                    return 0;
                }else
                {
                    return todo.buyNum;
                }
            }    
            else if(this.flag==2)
            {
                if(!todo.sellMoney)
                {
                    return "0.00";
                }else
                {
                    return fmoney(todo.sellMoney,2);
                }
            }
            else if(this.flag==3)
            {
                if(!todo.returnNum)
                {
                    return 0;
                }else
                {
                    return todo.returnNum;
                }
            }  
        },
        totalMoney(todo){
            if(this.flag==1)
            {
                if(!todo.returnNum)
                {
                    return 0;
                }else
                {
                    return todo.returnNum;
                }
            } 
            else if(this.flag==2)
            {
                if(!todo.returnMoney)
                {
                    return "0.00";
                }else
                {
                    return fmoney(todo.returnMoney,2);
                }
            }
            else if(this.flag==3)
            {
                if(!todo.returnMoney)
                {
                    return '0.00';
                }else
                {
                    return fmoney(todo.returnMoney,2);
                }
            }    

            
        },
        thisDay(){
            this.initPage();
            this.checkedTime=1;
            this.flagTime=1;
            this.startTime='';
            this.endTime='';
            this.StatisticalOfCate();
        },
        thisMouth(){
            this.initPage();
            this.checkedTime=2;
            this.flagTime=2;
            this.startTime='';
            this.endTime='';
            this.StatisticalOfCate();
        },
        lastMouth(){
            this.initPage();
            this.checkedTime=3;
            this.flagTime=3;
            this.startTime='';
            this.endTime='';
            this.StatisticalOfCate();
        },

        sort1(){
            this.initPage();
            this.flag=1;
            this.StatisticalOfCate();
           
        },
        sort2(){
            this.initPage();
            this.flag=2;
            this.StatisticalOfCate();
        },
        sort3(){
            this.initPage();
            this.flag=3;
            this.StatisticalOfCate();
        },
        sort4(){
            this.initPage();
            this.flag=4;
            this.StatisticalOfCate();
        },
        initPage(){
            this.startRow=1;
            this.endRow=this.base;
            this.goods=[];
        },
        initData(){

            if(this.$route.query.startTime){
                this.startTime = this.$route.query.startTime;
                this.endTime = this.$route.query.endTime;
            }
           if(this.$route.query.flag)
                this.flag = this.$route.query.flag;
            this.StatisticalOfCate(); 
        },
        //下拉刷新，count=2，从第二页开始加载数据
        onRefresh(done) {
        this.loadingText='加载中……';
        this.initPage();
        this.StatisticalOfCate();
        done()
        },
        //加载更多
        async onInfinite(done){
       
        
        this.startRow = this.goods.length+1;
        this.endRow = this.goods.length +this.base;
        //获取信息
        //
         
        let response = await StatisticalOfCate(this.token,this.startTime,this.endTime,this.flagTime,this.flag,this.startRow,this.endRow);
            let temporaryGoods = response.data;
            if(temporaryGoods.length>=this.base)
            {
                this.$el.querySelector('.load-more').style.display = 'block';
            }
            else
            {
                //禁用上拉加载功能
                this.loadingText='加载中……';
                this.$el.querySelector('.load-more').style.display = 'none';
            }    
            this.goods = this.goods.concat(response.data);
         
        done()
        },

        async  StatisticalOfCate(){
            let response = await StatisticalOfCate(this.token,this.startTime,this.endTime,this.flagTime,this.flag,this.startRow,this.endRow);
            if(response.resultMessage!="null")
            { 
                this.startTime = response.resultMessage;
                this.endTime = '';
            }
            let temporaryGoods = response.data;
            if(temporaryGoods.length>=this.base)
            {
                this.$el.querySelector('.load-more').style.display = 'block';
            }
            else
            {
                //禁用上拉加载功能
                this.loadingText='加载中……';
                this.$el.querySelector('.load-more').style.display = 'none';
            }    
            this.goods = this.goods.concat(response.data);
        },

        changeBig(todo){
            // 手指触摸的同时将商品完整名称显示并实现放大效果
              todo.$event.target.innerText = todo.todo.cateName;
              todo.$event.target.style.height = ".9rem" 
              todo.$event.target.style.lineHeight = ".32rem" 
              todo.$event.target.style.zoom = "1.1" 
               
        },
        changeSmall(todo){
            // 手指移开的同时商品名和样式还原
             todo.$event.target.innerText=todo.todo.cateName.substring(0,5)+"..."
             todo.$event.target.style.height = "inherit"
             todo.$event.target.style.zoom = "1"
        }
    },
    watch: {
        $route: function (value){

                this.initPage();
                this.initData();
               
        }
    }
}
</script>

<style lang="scss" scoped="">
    @import 'src/style/mixin';    

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.32rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .statistics_main{
        margin-top: 1.08rem;
        background: #fff;
        .choose_time{
            padding: .4rem .48rem;
            li{
                float: left;
                @include wh(.92rem, .4rem);
                margin-right: .56rem;
                div{
                    @include wh(100%, 100%);
                    @include sc(.3rem, $blue);
                    text-align: center;
                    border-radius: .2rem;
                }
            }
            li:last-child{
                margin-right: 0;
                width: 2.1rem;
            }
            li.active{
                div{
                    background: $blue;
                    color: #fff;
                }
            }
        }
        .text{
            padding: .4rem .48rem 0;
            div{
                @include sc(.26rem, #666);
            }
        }
        .table{
            padding: .58rem .24rem .52rem;
            .row{
                display: flex;

                margin-bottom: .4rem;
                .cell{
                    flex: 1;
                    
                    @include sc(.28rem, #333);
                    text-align: center;
                    height: .28rem;
                    line-height: .28rem;
                }
            }
            .flex{
                margin:0  .1rem -.3rem .3rem;
                padding-top:.1rem;

            }
            .flex:nth-of-type(1){
                padding-top:.4rem;
            }
            .head_row{

                margin-bottom: .32rem;
                .cell{
                    color: #666;
                }
            }
            .footer_row{
                margin-top: .02rem;
                margin-bottom: 0;
                .cell{
                    color: #c8574b;
                }
            }
        }
    }
    .receive_voucher_scroll .inner{
        padding-bottom: -1rem;
    }
</style>
